<template>
    <box width="540px"
         height="680px"
         left="538px"
         top="291px"
         title="产业差评分析">
        <my-marquee :info="info.info"
                    :width="510"></my-marquee>
        <my-title top="90px"
                  title="产业差评分布图"></my-title>
        <div class="chart-1"
             ref="chart-1"></div>
        <my-title top="400px"
                  title="产业超期未闭环分析"></my-title>
        <div class="chart-2"
             ref="chart-2"></div>
    </box>
</template>

<script>
export default {
    props: {
        info: {},
    },
    components: {},
    data() {
        return {}
    },
    watch: {
        info: {
            handler(newVal) {
                this.$nextTick(() => {
                    this.chartInit1(newVal.badChartData)
                    this.chartInit2(newVal.overChartData)
                })
            },
            deep: true,
        },
    },
    methods: {
        chartInit1(data) {
            let _chart = this.$echarts.init(this.$refs['chart-1'])
            let _options = {
                grid: {
                    top: '30',
                    right: '40',
                    left: '40',
                    bottom: '30', //图表尺寸大小
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    color: '#59588D',
                    data: data.map((item) => item.name),
                    axisLabel: {
                        margin: 8,
                        color: '#8fadcc',
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                    axisTick: {
                        show: true,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '数量/单',
                        nameTextStyle: {
                            color: '#8fadcc',
                        },
                        axisLabel: {
                            color: '#8fadcc',
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisTick: {
                            show: true,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    {
                        type: 'value',
                        name: '差评率/%',
                        nameTextStyle: {
                            color: '#8fadcc',
                        },
                        position: 'right',
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#8fadcc',
                            },
                        },
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        name: '数量',
                        data: data.map((item) => item.barVal),
                        barWidth: '12',

                        itemStyle: {
                            normal: {
                                color: '#0095ff',
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: '#333',
                                position: 'top',
                            },
                        },
                    },
                    {
                        type: 'line',
                        name: '差评率',
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#ffaa00',
                            },
                        },
                        data: data.map((item) => item.lineVal),
                    },
                ],
            }
            _chart.setOption(_options)
        },
        chartInit2(data) {
            let _chart = this.$echarts.init(this.$refs['chart-2'])
            let _options = {
                grid: {
                    top: '30',
                    right: '40',
                    left: '40',
                    bottom: '30', //图表尺寸大小
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    color: '#59588D',
                    data: data.map((item) => item.name),
                    axisLabel: {
                        margin: 8,
                        color: '#8fadcc',
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                    axisTick: {
                        show: true,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '数量/单',
                        nameTextStyle: {
                            color: '#8fadcc',
                        },
                        axisLabel: {
                            color: '#8fadcc',
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisTick: {
                            show: true,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        name: '数量',
                        data: data.map((item) => item.val),
                        barWidth: '12',

                        itemStyle: {
                            normal: {
                                color: '#ff6e00',
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: '#333',
                                position: 'top',
                            },
                        },
                    },
                ],
            }
            _chart.setOption(_options)
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang='less' scoped>
.chart-1 {
    position: absolute;
    width: 540px;
    height: 260px;
    left: 0;
    top: 130px;
}
.chart-2 {
    position: absolute;
    width: 540px;
    height: 250px;
    left: 0px;
    bottom: 0px;
}
</style>